<template>
  <n-modal
    v-model:show='showModal'
    preset='card'
    title='字典项列表'
    :show-icon='false'
    class='w-800px'
  >
    <div>
      <div class='w-full flex justify-between items-center'>
        <n-space class='juzhong1'>
          <span>所属字典：</span>
          <span>{{parentdata.name || ""}}</span>
        </n-space>
        <n-space class='juzhong1'>
          <n-button @click="handleSearch" size='small'>查询</n-button>
          <n-button @click="handleCreate" size='small'>新建</n-button>
        </n-space>
      </div>

    </div>
    <div class="w-full h-500px">
      <flextable :column="column" :tabledata="tableData" :showctl='false' :loading='loading'></flextable>
    </div>
    <div class="w-full h-8 juzhong1">
      <fenye :total="total" @change="gettabledatafunc" ref="fenyeref"  class="juzhong1"></fenye>
    </div>
    <template #action>
      <div class='w-full flex justify-end items-center'>
        <n-button class='mx-1' @click='handleClose'>关闭</n-button>
      </div>
    </template>
    <ChildModel ref='editref'></ChildModel>
  </n-modal>
</template>

<script setup lang='ts' name='childlist'>
import ChildModel from "./childmodel.vue"
import {  useListIndex, } from '../../../hooks/useEdit'
import { inject, ref,defineEmits,defineExpose } from 'vue'
import { useColumns } from '../../../hooks/useColumns'
// 弹窗控制区域
const showModal=ref(false)
const emit=defineEmits(["close"])
const reset=()=>{}
const handleClose=()=>{
  showModal.value = false
  emit("close")
  reset()
}
const parentdata = ref({})
const init=(data:any)=>{
  console.log(data,"传递的参数是什么2")
  parentdata.value = data
  showModal.value = true
  console.log(parentdata.value,"传递的参数是什么3")
}

// 表格数据区域
const {
  fenyeref, editref, tableData, total, handleSearch,
  handleView, handleCreate,refreshdelete,http,message,loading,
} = useListIndex()
const handleEdit=(data:any)=>{
  const shuju = {...data,parent:data.parent?.id || ""}
  editref.value!.init("edit", shuju)
}
// 点击删除
let delDialog: Function = inject("delDialog")
const handleDelete = (data: any) => {
  delDialog(refreshdelete,http.zidiandelete,data.id,data.name)
}
const {index, createdTime, changeTime,desc, view, edit, del} = useColumns(handleView,handleEdit,handleDelete)
const column = ref([
  index,
  {title: "名称", key: "name",width:100, show: true},
  {title: "所属上级", key: "parent",width:100, show: true,render: (rowData:any)=>{
      return rowData["parent"]?rowData["parent"].name:""
    }},desc,
  createdTime,changeTime,view, edit, del
])

// 向后台获取数据
const gettabledatafunc = () => {
  const config = {
    page:fenyeref.value.page,
    pageSize:fenyeref.value.pageSize,
    parent: parentdata.value?.id || "",
  }
  http.zidianlist(config,loading).then((res:any)=>{
    if(res.data.code===0){
      tableData.value = res.data.items
      total.value = res.data.total
    }
  }).catch(err =>{
    message.error(err || "查询失败")
  })
}

defineExpose({init,handleClose})
</script>

<style scoped>

</style>